<head>
  <meta charset=UTF-8>
</head>
<body>
<ul>
  <li id="java">疯狂Java讲义</li>
  <li id="javaee" class="test">轻量级Java EE企业应用实战</li>
  <li id="ajax">疯狂前端开发讲义</li>
  <li id="xml">疯狂XML讲义</li>
  <li id="ejb">经典Java EE企业应用实战</li>
  <div><span id="android">疯狂Android讲义</span></div>
</ul>
<span>疯狂Java联盟</span>
<script type="text/javascript" src="jquery-3.1.1.js">
</script>
<script type="text/javascript">
//访问父元素内索引为第1/4/7等的li元素
$("li:nth-child(3n+1)").css("border" , "1px dashed black");
//访问父元素内索引为倒数第1/4/7等的li元素
$("li:nth-last-child(3n+1)").css("background-color" , "grey")
  .css("padding" , "10px");
//访问页面中span元素且该span元素的父元素下仅包含该span元素
$("span:only-child()").append("<b>是作为父元素唯一子元素的span元素</b>");
</script>
</body>
